<template>
  <view class="homepage" >
    <image
      class="bg-absolute"
        :src="bg"
      />
		<u-navbar
			safeAreaInsetTop
			fixed
			leftIconColor="#fff"
			leftText="运营周报"
			:autoBack="true"
			bgColor="transparent"
		/>
    <view class="homepage-top">
      <image
        :src="topBg"
      />
      <view class="homepage-big-title">{{month}}月份</view>
      <view class="homepage-big-title">第{{chineseWeekToday}}周运营周报</view>
      <view class="homepage-big-btn" @click="weekReport">点击查看</view>
    </view>
    <view class="homepage-box">
      <view class="tabs-box">
        <view :class="{active: active === 0}" @click="tabClick(0)">经营数据</view>
        <view :class="{active: active === 1}" @click="tabClick(1)">流量数据</view>
      </view>
      <!-- 经营数据 -->
      <view v-if="active === 0">
          <view class="homepage-content">
            <view @click="show = true" class="date-select">{{datetime}}</view>
            <u-icon @click="show = true" color="#999999" name="arrow-down-fill"></u-icon>
          </view>
          <view class="home-stastic-box">
            <view class="stastic-item" v-for="item, index in jyList" :key="index">
              <view>
                <image
                  :src="item.img"
                />
                {{item.label}}
              </view>
              <view><view class="num">{{item.num || 0}}</view>&nbsp;&nbsp;{{item.dw}}</view>
            </view>
          </view>
          <view class="top-box">
            <view class="top-title-box">
              <view class="top-title">{{rankTag ? '今日景区消费排名' : '消费类型排名'}}</view>
              <view class="top-title-btn" @click="rankChange">
                切换
                <image
                  :src="Switch"
                />
              </view>
            </view>
            <view class="u-list">
              <u-list :scrollable="false" height='auto'>
                <u-list-item
                class="title-list"
                style="background: #0056A9"
                >
                  <view class="list-cell1">
                    排名
                  </view>
                  <view class="list-cell2">景区名称</view>
                  <view class="list-cell3">销售额</view>
                  <view class="list-cell4">增长率</view>
                </u-list-item>
                <u-list-item
                  :style="{background: index % 2 === 0 ? '#F8FAFF' : '#DDE7FF'}"
                  v-for="(item, index) in jyTopList"
                  :key="index"
                >
                  <view class="list-cell1">
                    <image
                      v-if="index === 0"
                      :src="no1"
                    />
                    <image
                      v-else-if="index === 1"
                      :src="no1"
                    />
                    <image
                      v-else-if="index === 2"
                      :src="no1"
                    />
                    <view v-else>{{index + 1}}</view>
                  </view>
                  <view class="list-cell2">{{item.name}}</view>
                  <view class="list-cell3">{{item.num}}</view>
                  <view class="list-cell4" :style="{color: index % 2 === 0 ? '#F23D4F' : '#00B772'}">{{item.rate}} %</view>
                </u-list-item>
              </u-list>
              <view class="more">更多&nbsp;&nbsp;&nbsp;&nbsp;{{'>'}}</view>
            </view>
          </view>
      </view>
      <!-- 流量数据 -->
      <view v-if="active === 1">
          <view class="homepage-content">
            <view @click="shows = true" class="date-select">{{datetimes}}</view>
            <u-icon @click="shows = true" color="#999999" name="arrow-down-fill"></u-icon>
          </view>
          <view class="home-stastic-box">
            <view class="stastic-item" v-for="item, index in llList" :key="index">
              <view>
                <image
                  :src="item.img"
                />
                {{item.label}}
              </view>
              <view><view class="num">{{item.num || 0}}</view>&nbsp;&nbsp;{{item.dw}}</view>
            </view>
          </view>
          <view class="top-box">
            <view class="top-title-box">
              <view class="top-title">{{rankTags ? '入区时间比' : '入区年龄比'}}</view>
              <view class="top-title-btn" @click="rankChanges">
                切换
                <image
                  :src="Switch"
                />
              </view>
            </view>
            <qiun-data-charts 
              type="ring"
              :opts="opts"
              :chartData="chartData"
            />
            <view class="legend-box">
              <view class="legend-item" v-for="item, index in data" :key="index">
                <view class="circle" :style="{background: opts.color[index]}"></view>
                <view class="label">{{item.name}}</view>
                <view class="rate" :style="{color: opts.color[index]}">{{item.sum || 0}}%</view>
              </view>
            </view>
          </view>
        
      </view>
    </view>

    <u-datetime-picker
      :show="show"
      v-model="datetimeDate"
      @confirm="dateChange"
      @cancel="show = false"
      mode="date"
    ></u-datetime-picker>
    <u-datetime-picker
      :show="shows"
      v-model="datetimeDates"
      @confirm="dateChanges"
      @cancel="shows = false"
      mode="date"
    ></u-datetime-picker>
  </view>
</template>

<script>
import {numberChangeString} from '@/utils/common.js';
import {
  getJyViewDetail,
  getJyViewRank,
  getLlDetail,
  getLlChart,
} from '@/api/index/index.js';
import Switch from '@/static/images/homepage/switch.png';
import bg from '@/static/images/homepage/bg.png';
import topBg from '@/static/images/homepage/topBg.png';
import dpsum from '@/static/images/homepage/dpsum.png';
import xfsum from '@/static/images/homepage/xfsum.png';
import rjsum from '@/static/images/homepage/rjsum.png';
import sjry from '@/static/images/homepage/sjry.png';
import yyry from '@/static/images/homepage/yyry.png';
import no1 from '@/static/images/homepage/no1.png';
import no2 from '@/static/images/homepage/no2.png';
import no3 from '@/static/images/homepage/no3.png';
  export default {
    data() {
      return {
        bg,
        topBg,
        no1,
        no2,
        no3,
        dpsum,
        xfsum,
        Switch,
        rjsum,
        datetime: '请选择',
        datetimes: '请选择',
        datetimeDate: new Date(),
        datetimeDates: new Date(),
        show: false,
        shows: false,
        rankTag: true,
        rankTags: true,
        active: 1,
        sum: 0,
        todayWeek: 0,
        chineseWeekToday: '',
        month: 0,
        chineseWeek: [
          '一', '二', '三', '四', '五', '六', '七', '八', '九', '十',
          '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十',
          '二十一', '二十二', '二十三', '二十四', '二十五', '二十六', '二十七', '二十八', '二十九', '三十',
        ],
        jyTopList: [],
        jyList: [
          {
            img: dpsum, label: '店铺总数', num: 0, dw: '家'
          },
          {
            img: xfsum, label: '消费总额', num: 0, dw: '万元'
          },
          {
            img: rjsum, label: '人均消费', num: 0, dw: '元'
          },
        ],
        llList: [
          {
            img: sjry, label: '实际入园总人次', num: 0, dw: '人'
          },
          {
            img: yyry, label: '预约入园总人次', num: 0, dw: '人'
          },
        ],
        tabList: [
          {name: '经营数据'},
          {name: '流量数据'},
        ],
        chartData: {},
        opts: {
          rotate: false,
          rotateLock: false,
          background: '#fff',
          color: ["#387AF6","#67D4E6","#6F23F5","#FFC97A","#DF4A50"],
          padding: [5,5,5,5],
          dataLabel: false,
          enableScroll: false,
          legend: {
            show: false,
            position: "bottom",
            lineHeight: 25
          },
          title: {
            name: ''
          },
          subtitle: {
            name: ''
          },
          extra: {
            ring: {
              ringWidth: 40,
              activeOpacity: 0.5,
              activeRadius: 10,
              offsetAngle: 0,
              labelWidth: 15,
              border: false,
              borderWidth: 3,
              borderColor: "#FFFFFF"
            }
          }
        },
        data: [],
      }
    },
    onReady() {
      // this.getServerData();
      // let date = '2023-11-25'
      let date = this.$moment().format('YYYY-MM-DD')
      this.datetime = date
      this.datetimes = date
      let week = this.getWeeksInYear(this.$moment().year());
      let todayWeek = this.getWeekNum(week, this.$moment())
      this.todayWeek = todayWeek
      let monthOneWeek = this.getWeekNum(week, this.$moment().startOf('month'))
      this.month = this.$moment().month() + 1
      this.chineseWeekToday = this.chineseWeek[todayWeek - monthOneWeek]
      this.tabClick(0);
    },
    methods: {
      getWeekNum (week, date) {
       return week.filter(item => {
          let cutDate = this.$moment(date).format('YYYYMMDD');
          return this.$moment(item.startDate).format('YYYYMMDD') <= cutDate && cutDate <= this.$moment(item.endDate).format('YYYYMMDD');
        })?.[0]?.weekNum || 0
      },
      getJyViewDetailFn () {
				getJyViewDetail({
					date: this.datetime
				}).then(res => {
          this.jyList = this.jyList.map((item, index) => {
            let obj = {...item}
            if (index === 0) {
              obj.num = res?.data?.shopCount || 0
            } else if (index === 0) {
              obj.num = res?.data?.totalPrice || 0
            } else {
              obj.num = res?.data?.avgPrice || 0
            }
            return obj
          })
				})
      },
      getJyViewRankFn () {
				getJyViewRank({
					date: this.datetime
				}).then(res => {
          this.jyTopList = res?.data?.map(item => {
            return {
              name: item.jingquName,
              num: Number(item.totalPrice).toFixed(0),
              rate: Number(item.rate).toFixed(0),
            }
          })
				})
      },
      getLlDetailFn () {
				getLlDetail({
					date: this.datetimes
				}).then(res => {
          this.llList = this.llList.map((item, index) => {
            let obj = {...item}
            if (index === 0) {
              obj.num = res?.data?.total || 0
            } else {
              obj.num = res?.data?.total || 0
            }
            return obj
          })
				})
      },
      getLlChartFn () {
				getLlChart({
					date: this.datetimes
				}).then(res => {
          this.data = res?.data?.type?.map((item, index) => {
            return {
              name: item,
              value: res?.data?.count?.[index] || 0
            }
          })
          this.getServerData()
				})
      },
      getWeeksInYear(year) {
        let weeks = [];
        let date = new Date(year, 0, 1); // 1月1日
        let dayOfWeek = date.getDay() ? date.getDay() : 7;
        let weekNum = 1;
        if (dayOfWeek !== 1) {
            weeks.push({
              weekNum: weekNum,
              startDate: new Date(date),
              endDate: new Date(date.getTime() + (7 - dayOfWeek) * 24 * 60 * 60 * 1000)
            });
            weekNum++;
            date.setDate(date.getDate() + (8 - dayOfWeek)); // 增加日期直到下一个周一
        }
        // 循环今年的每一天
        while (date.getFullYear() === year) {
          // 如果今天为星期天，则添加进新的周
          if (date.getDay() === 1) {
            weeks.push({
              weekNum: weekNum,
              startDate: new Date(date),
              endDate: new Date(date.getTime() + 6 * 24 * 60 * 60 * 1000)
            });
            weekNum++;
          }
          // 移动到下一天
          date.setDate(date.getDate() + 1);
        }
        // console.log(weeks);
        return weeks;
      },
      weekReport () {
        uni.navigateTo({ url: `/pages/weeklyReport/weeklyReport?year=${this.$moment().year()}&week=${this.todayWeek}` })        
      },
      dateChange (e) {
        this.datetimeDate = e;
        this.datetime = this.$moment(e.value).format('YYYY-MM-DD');
        this.show = false;
        this.tabClick(0);
      },
      dateChanges (e) {
        this.datetimeDates = e;
        this.datetimes = this.$moment(e.value).format('YYYY-MM-DD');
        this.shows = false;
        this.tabClick(1);
      },
      rankChange () {
        this.rankTag = !this.rankTag;
      },
      rankChanges () {
        this.rankTags = !this.rankTags;
      },
      numberChangeString,
      tabClick (e) {
        // if (this.active === e) return;
        this.active = e;
        if (e) {
          this.getLlDetailFn()
          this.getLlChartFn()
        } else {
          this.getJyViewDetailFn()
          this.getJyViewRankFn()
        }
        // console.log(e);
      },
      getServerData() {
        let sum = this.data.reduce((a, b) => a + b.value, 0);
        this.data = this.data.map(item => ({
          ...item, sum: (item.value/sum * 100).toFixed(1)
        }))
        let res = {
            series: [
              {
                data: this.data
              }
            ]
        };
        this.chartData = JSON.parse(JSON.stringify(res));
      },
    }
  }
</script>

<style lang="less">
  .homepage {
    position: relative;
    padding: 16rpx;
    padding-top: 196rpx;
    .charts-box {
      width: 100%;
      height: 600rpx;
    }
    .bg-absolute {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: -1;
    }
    .homepage-top {
      margin-bottom: 16rpx;
      padding-top: 78rpx;
      height: 336rpx;
      position: relative;
      image {
        width: 100%;
        position: absolute;
        height: 100%;
        left: 0;
        top: 0;
        z-index: -1;
      }
      .homepage-big-title {
          height: 64rpx;
          font-size: 52rpx;
          font-family: HYYaKuHeiW, HYYaKuHeiW;
          font-weight: 700;
          line-height: 64rpx;
          letter-spacing: 2px;
          background-image: linear-gradient(90deg, #0798E4 0%, #2942D0 90%);
          text-align: center;
          margin-bottom: 18rpx;
          background-clip: text;
          color: transparent;
      }
      .homepage-big-btn {
          width: 208rpx;
          height: 48rpx;
          background: linear-gradient(90deg, #0798E4 0%, #2942D0 66%);
          border-radius: 24rpx;
          font-size: 26rpx;
          font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
          font-weight: 700;
          color: #FFFFFF;
          line-height: 48rpx;
          letter-spacing: 1px;
          text-align: center;margin: 0 auto;
      }
    }
    .homepage-box {
      background: #E9EFFB;
      border-radius: 16rpx;
      overflow: hidden;
      .tabs-box {
        display: flex;
        align-items: center;
        height: 80rpx;
        background: #F7FAFF;
        view {
          height: 100%;
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex: 1;
          font-size: 32rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #666666;
          line-height: 40rpx;
          border-radius: 16rpx;
          background: #F7FAFF;
          &.active {
            font-size: 36rpx;
            font-weight: 900;
            color: #2B539D;
            background: #E9EFFB;
            border-radius: 16rpx 16rpx 0rpx 0rpx;
            &::after {
              position: absolute;
              width: 64rpx;
              height: 4rpx;
              background: #2B539D;
              border-radius: 64rpx 64rpx 64rpx 64rpx;
              content: '';
              left: 0;
              right: 0;
              bottom: 0;
              margin: 0 auto;
            }
          }
        }
      }
      .homepage-content {
        display: flex;
        align-items: center;
        padding: 24rpx 16rpx;
        .date-select {
          height: 40rpx;
          font-size: 28rpx;
          font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
          font-weight: 400;
          color: #333333;
          line-height: 40rpx;
          padding-right: 24rpx;
        }
        .u-icon {
          font-size: 18rpx;
        }
      }
      .home-stastic-box {
        display: flex;
        background: #fff;
        border-radius: 16rpx;
        justify-content: space-between;
        padding: 16rpx 32rpx;
        margin: 0 16rpx;
        .stastic-item {
          flex: 1;
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          &::after {
            content: '';
            width: 2rpx;
            height: 68rpx;
            position: absolute;
            background: #E8E8E8;
            top: 0;
            bottom: 0;
            margin: auto 0;
            right: 10rpx;
          }
          &:nth-last-of-type(1) {
            &::after {
              width: 0;
            }
            align-items: flex-start;
            padding-left: 30rpx;
          }
          &:nth-of-type(1) {
            align-items: flex-start;
          }
          view:nth-of-type(1) {
            display: flex;
            align-items: center;
            font-size: 24rpx;
            font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
            font-weight: 400;
            color: #666666;
            line-height: 40rpx;
            height: 40rpx;
            image {
              height: 32rpx;
              width: 32rpx;
              margin-right: 8rpx;
              margin-bottom: 8rpx;
            }
          }
          view:nth-of-type(2) {
            display: flex;
            align-items: flex-end;
            font-size: 24rpx;
            font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
            font-weight: 400;
            color: #007AFF;
            line-height: 28rpx;
            .num {
              height: 46rpx;
              font-size: 40rpx;
              font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
              font-weight: 400;
              color: #007AFF;
              line-height: 46rpx;
            }
          }
        }
      }
      .top-box {
        background: #FFFFFF;
        border-radius: 16rpx;
        margin: 16rpx 16rpx 0;
        padding: 16rpx;
        .top-title-box {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 24rpx;
          .top-title {
            font-size: 28rpx;
            font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
            font-weight: 500;
            color: #333333;
            line-height: 34rpx;
          }
          .top-title-btn {
            display: flex;
            align-items: center;
            padding: 0 20rpx;
            height: 44rpx;
            border-radius: 22rpx;
            color: #0056A9;
            opacity: 1;
            border: 2rpx solid #0056A9;
            image {
              width: 34rpx;
              height: 32rpx;
              margin-left: 10rpx;
            }
          }
        }
        .u-list {
          border-radius: 16rpx;
          overflow: hidden;
          .u-list-item {
            display: flex;
            align-items: center;
            flex-direction: row;
            padding: 20rpx 16rpx;
            .list-cell1 {
              flex: 1;
              font-size: 28rpx;
              font-weight: 400;
              color: #666666;
              line-height: 34rpx;
              padding-right: 20rpx;
              image {
                width: 40rpx;
                height: 40rpx;
              }
            }
            .list-cell2, .list-cell3, .list-cell4 {
              flex: 4;
              font-size: 28rpx;
              font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
              font-weight: 400;
              color: #333333;
              line-height: 34rpx;
            }
            .list-cell3 {
              flex: 3;
            }
            .list-cell4 {
              flex: 2;
            }
            &:nth-of-type(2n + 1) {
              background-color: #DDE7FF;
            }
            &:nth-of-type(1) {
              background-color: #0056A9;
              >view {
                color: #fff;
              }
            }
          }
          .title-list {
            background: #0056A9;
            padding: 30rpx 16rpx;
            view {
              color: #fff;
            }
          }
          .more {
            margin: 16rpx 0 10rpx;
            font-size: 32rpx;
            font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
            font-weight: 400;
            color: #0056A9;
            line-height: 40rpx;
            text-align: center;
          }
        }
        .legend-box {
          display: flex;
          flex-wrap: wrap;
          padding: 30rpx 42rpx;
          align-items: center;
          .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 32rpx;
            width: 50%;
            .circle {
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
            }
            .label, .rate {
              flex: 2;
              font-size: 24rpx;
              font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
              font-weight: 400;
              color: #111111;
              line-height: 34rpx;
              margin: 0 14rpx;
            }
            .rate {
              flex: 1;
              text-align: right;
              margin-right: 32rpx;
            }
          }
        }
      }
    }
  }
</style>
